<template>
  <div class="home">
    <Header />
    <div class='chartbody' id='ReceiveBody'>
      <div class="chartbox">
        <div ref='myChart'
              style="height: 100%"></div>
      </div>
      <div class="chartbox no-bor-b">
        <div ref='myChart1'
            style="height: 100%"></div>
      </div>
    </div>
  </div>
</template>
<script>
import Header from '@/components/Header.vue'
import dataservice from '@/services/dataservice.js'
import { addWaterMarker } from './data'
import chartData from './CharData'
export default {
  data () {
    return {
      sumCharData1: [],
      sumCharData2: [],
      BuildingdatasummaryList: [],
      dataTimeCreate: new Date()
    }
  },
  name: 'Index',
  components: {
    Header
  },
  created () {
    this.initBuildingdatasummary().then(() => {
      this.inityearamount()
      this.initmonthamount()
      this.createdUserRecord ()
    })
  },
  mounted () {
    addWaterMarker('ReceiveBody', decodeURI(this.$cookies.get('UserName'))+this.dateTableFormat(this.dataTimeCreate,'ymd'))
  },
  methods: {
      // 创建用户访问记录
   async createdUserRecord () {
      let model = {}
      var name = 'Receive' + this.$route.query.type
      model = {
        jm_channel: 20,
        jm_boardname: 'Receive',
        jm_boardtype: this.$route.query.type,
        jm_address: window.location.href,
        jm_time: this.dateTableFormat(new Date(),'yyyy-MM-dd' ),
        ownerid: this.$cookies.get('UserId')
      }

      let httpResult =await dataservice.createdUserRecord(model, model.ownerid)
      if (!httpResult) { console.log('查看APP端' + name + '错误') }
    },
    dateTableFormat (val, dateFormat) { 
      if (!val) {
        return ''
      }
      var date = new Date(val) 
      //date.setHours(date.getHours()-8)  
      var getYear=date.getFullYear()  
      var getDay=date.getDate() 
      if (dateFormat==='ym') {   
        var diffMonth = date.getMonth()
        return getYear+'-'+diffMonth 
      }else{
        var diffMonth = date.getMonth()+1
         return dataservice.formatDate(date, 'yyyy-MM-dd')
         //getYear+'-'+diffMonth+'-'+getDay
      }
      return dataservice.formatDate(new Date(val), 'yyyy-MM-dd')
    },
    dreawLine () { 
      // var myChart = this.$echarts.init(this.$refs.myChart)
      // myChart.setOption(data4)
      // var myChart1 = this.$echarts.init(this.$refs.myChart1)
      // myChart1.setOption(data5)
    },
    async initBuildingdatasummary () {
      var entParam = {
        indicatorName: '',
        strWhere: '',
        type: 'sumMoney'
      }
      await dataservice.dataRouter('execute',
        {
          uri: 'jm_unifiedaction',
          entData: {
            functionname: 'accumulativemoeny_dashboard',
            params: JSON.stringify(entParam)
          },
          userid: this.$cookies.get('UserId') }).then(HttpResult => {
        if (HttpResult.status === 200 && HttpResult.data.res === 'success') {
          var results = JSON.parse(HttpResult.data.resData).statemessage
          if (results != '[]') {
            this.BuildingdatasummaryList = JSON.parse(results)[0]
            this.sumCharData1 = this.BuildingdatasummaryList.annualreturnamount.toFixed(1)
            this.sumCharData2 = this.BuildingdatasummaryList.totalmonthlypayment.toFixed(1)
            let dataTimeCreate = this.BuildingdatasummaryList.datatimeCreate
            var date = new Date(dataTimeCreate) 
            date.setHours(date.getHours()-8)  
            this.dataTimeCreate=dataservice.formatDate(date, 'yyyy-MM-dd')
          }
        }
      })
    },
    // 获取楼栋年度回款金额
    inityearamount () {
      var entParam = {
        indicatorName: '年度回款累计',
        strWhere: ' and jm_level=20 ',
        type: 'chartReport'
      }
      dataservice.dataRouter('execute',
        {
          uri: 'jm_unifiedaction',
          entData: {
            functionname: 'accumulativemoeny_dashboard',
            params: JSON.stringify(entParam)
          },
          userid: this.$cookies.get('UserId') }).then(httpResult => {
        if (httpResult.status === 200 && httpResult.data.res === 'success') {
          var resData = JSON.parse(httpResult.data.resData).statemessage
          if (resData != '[]') {
            var result = JSON.parse(resData)
            result=result.sort((b,x)=>x.YDindexvalue-b.YDindexvalue)
            let chartData1 =_.map(_.pluck(result, 'YDindexvalue'),function(a){return (Math.round(a*10)/10).toFixed(1)})
            let chartLabel1 = _.pluck(result, 'jm_areaidName') 
            var myChart = this.$echarts.init(this.$refs.myChart)
            myChart.setOption(chartData.initChart3(chartLabel1, chartData1, this.sumCharData1, this.dataTimeCreate))
          }
        }
      })
    },
    // 获取楼栋月度回款金额
    initmonthamount () {
      var entParam = {
        indicatorName: '月度回款累计',
        strWhere: ' and jm_level=20 ',
        type: 'chartReport'
      }
      dataservice.dataRouter('execute',
        {
          uri: 'jm_unifiedaction',
          entData: {
            functionname: 'accumulativemoeny_dashboard',
            params: JSON.stringify(entParam)
          },
          userid: this.$cookies.get('UserId') }).then(httpResult => {
        if (httpResult.status === 200 && httpResult.data.res === 'success') {
          var resData = JSON.parse(httpResult.data.resData).statemessage
          if (resData != '[]') {
            var result = JSON.parse(resData)
            result=result.sort((b,x)=>x.YDindexvalue-b.YDindexvalue)
            let chartData2 =_.map(_.pluck(result, 'YDindexvalue'),function(a){return (Math.round(a*10)/10).toFixed(1)})
            let chartLabel2 = _.pluck(result, 'jm_areaidName') 
            var myChart1 = this.$echarts.init(this.$refs.myChart1)
            myChart1.setOption(chartData.initChart4(chartLabel2, chartData2, this.sumCharData2, this.dataTimeCreate))
          }
        }
      })
    }
  }
}

</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.souceLabel{
  color: #8a95ab;
  margin-top: -2%;
}
.chartbox {
  width: 94%;
  margin: 0 auto;
  font-family: PingFangSC-Medium;
  border-bottom: 1px solid #2d4675;
  padding-bottom: 0.5rem;
}
.no-bor-b {
  border-bottom: 0 none;
}
</style>
